<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Site Title -->
    <title>APEZ - Responsive Multi-Purpose HTML5 Template</title>
    <!-- Meta Description Tag -->
    <meta name="Description" content="APEZ - Responsive Multi-Purpose HTML5 Template">
    <!-- Favicon Icon -->
    <link rel="icon" type="image/x-icon" href="../images/favicon.png" />
    <!-- Material Design Lite Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/material/material.min.css" />
    <!-- Material Design Select Field Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/material/mdl-selectfield.min.css">
    <!-- Animteheading Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/animateheading/animateheading.min.css" />
    <!-- Owl Carousel Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/owl_carousel/owl.carousel.min.css" />
    <!-- Animate Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/animate/animate.min.css" />
    <!-- Magnific Popup Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/magnific_popup/magnific-popup.min.css" />
    <!-- Flex Slider Stylesheet CSS -->
    <link rel="stylesheet" href="../assets/plugin/flexslider/flexslider.min.css" />
    <!-- Custom Main Stylesheet CSS -->
    <link rel="stylesheet" href="../dist/css/style.css">
</head>
<body>

    <div class="wrapper">
        <!-- Start Header Section -->
        <header id="header" class="header-dark">
            <div class="layer-stretch hdr">
                <div class="tbl animated fadeInDown">
                    <div class="tbl-row">
                        <!-- Start Header Logo Section -->
                        <div class="tbl-cell hdr-logo">
                            <a href="../index.html"><img src="../images/logo.png" alt=""></a>
                        </div><!-- End Header Logo Section -->
                        <div class="tbl-cell hdr-menu">
                            <!-- Start Menu Section -->
                            <ul class="menu">
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Home <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu menu-megamenu-small">
                                        <li class="row">
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li><a href="../index.html">Home Style 1</a></li>
                                                    <li><a href="../index-1.html">Home Style 2</a></li>
                                                    <li><a href="../index-2.html">Home Style 3</a></li>
                                                    <li><a href="../index-3.html">Home Style 4</a></li>
                                                    <li><a href="../index-4.html">Home Style 5</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li><a href="../index-5.html">Home Style 6</a></li>
                                                    <li><a href="../index-6.html">Home Style 7</a></li>
                                                    <li><a href="../index-7.html">Home Style 8</a></li>
                                                    <li><a href="../index-8.html">Home Style 9</a></li>
                                                    <li><a href="../index-9.html">Home Style 10</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <ul>
                                                    <li><a href="../index-ecommerce.html">Home E-commerce</a></li>
                                                    <li><a href="../index-law.html">Home Law firm</a></li>
                                                    <li><a href="../index-property.html">Home Property</a></li>
                                                    <li><a href="../index-listing.html">Home Listing</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li>
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Feature <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-dropdown">
                                        <li>
                                            <a>Property</a>
                                            <ul class="menu-dropdown">
                                                <li><a href="../property-1.html">Property Listing 1</a></li>
                                                <li><a href="../property-2.html">Property Listing 2</a></li>
                                                <li><a href="../property-3.html">Property Listing 3</a></li>
                                                <li><a href="../property-page.html">Property Page</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Page Header</a>
                                            <ul class="menu-dropdown">
                                                <li><a href="../page-header-1.html">Page Header 1</a></li>
                                                <li><a href="../page-header-2.html">Page Header 2</a></li>
                                                <li><a href="../page-header-3.html">Page Header 3</a></li>
                                                <li><a href="../page-header-4.html">Page Header 4</a></li>
                                                <li><a href="../page-header-5.html">Page Header 5</a></li>
                                                <li><a href="../page-header-6.html">Page Header 6</a></li>
                                                <li><a href="../page-header-7.html">Page Header 7</a></li>
                                                <li><a href="../page-header-8.html">Page Header 8</a></li>
                                                <li><a href="../page-header-9.html">Page Header 9</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Page Footer</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="../page-footer-1.html">Page Footer 1</a></li>
                                                <li><a href="../page-footer-2.html">Page Footer 2</a></li>
                                                <li><a href="../page-footer-3.html">Page Footer 3</a></li>
                                                <li><a href="../page-footer-4.html">Page Footer 4</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Side Panel</a>
                                            <ul class="menu-dropdown">
                                                <li><a href="../side-panel-1.html">Light Side Panel</a></li>
                                                <li><a href="../side-panel-2.html">Dark Side Panel</a></li>
                                                <li><a href="../side-panel-3.html">Colored Side Panel</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="../popup.html">Popups</a></li>
                                        <li><a href="../coming-soon.html">Coming Soon</a></li>
                                        <li><a href="../404.html">404 Page Not Found</a></li>
                                        <li><a href="../503.html">503 Temporarily Unavailable</a></li>
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a id="menu-pages" class="mdl-button mdl-js-button mdl-js-ripple-effect">Pages <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu">
                                        <li class="row">
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Service Styles</div>
                                                <ul>
                                                    <li><a href="../services-1.html">Services Style 1</a></li>
                                                    <li><a href="../services-2.html">Services Style 2</a></li>
                                                    <li><a href="../services-3.html">Services Style 3</a></li>
                                                    <li><a href="../services-4.html">Services Style 4</a></li>
                                                    <li><a href="../services-5.html">Services Style 5</a></li>
                                                    <li><a href="../services-6.html">Services Style 6</a></li>
                                                    <li><a href="../services-7.html">Services Style 7</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Team Styles</div>
                                                <ul>
                                                    <li><a href="../team-1.html">Team Style 1</a></li>
                                                    <li><a href="../team-2.html">Team Style 2</a></li>
                                                    <li><a href="../team-3.html">Team Style 3</a></li>
                                                    <li><a href="../team-4.html">Team Style 4</a></li>
                                                    <li><a href="../team-5.html">Team Style 5</a></li>
                                                    <li><a href="../team-6.html">Team Style 6</a></li>
                                                    <li><a href="../team-7.html">Team Style 7</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Shop Styles</div>
                                                <ul>
                                                    <li><a href="../shop-1.html">Shop Style 1</a></li>
                                                    <li><a href="../shop-2.html">Shop Style 2</a></li>
                                                    <li><a href="../shop-3.html">Shop Style 3</a></li>
                                                    <li><a href="../shop-4.html">Shop Style 4</a></li>
                                                    <li><a href="../shop-5.html">Shop Style 5</a></li>
                                                    <li><a href="../shop-6.html">Shop Style 6</a></li>
                                                    <li><a href="../shop-7.html">Shop Style 7</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Shop Styles</div>
                                                <ul>
                                                    <li><a href="../shop-8.html">Shop Style 8</a></li>
                                                    <li><a href="../shop-9.html">Shop Style 9</a></li>
                                                    <li><a href="../shop-10.html">Shop Style 10</a></li>
                                                    <li><a href="../shop-page-1.html">Product Page 1</a></li>
                                                    <li><a href="../shop-page-2.html">Product Page 2</a></li>
                                                    <li><a href="../shop-page-3.html">Product Page 3</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Info Pages</div>
                                                <ul>
                                                    <li><a href="../about-1.html">About Us Style 1</a></li>
                                                    <li><a href="../about-2.html">About Us Style 2</a></li>
                                                    <li><a href="../about-3.html">About Us Style 3</a></li>
                                                    <li><a href="../contact-1.html">Contact Us Style 1</a></li>
                                                    <li><a href="../contact-2.html">Contact Us Style 2</a></li>
                                                    <li><a href="../gallery-1.html">Gallery Style</a></li>
                                                    <li><a href="../faq.html">FAQ</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Other Pages</div>
                                                <ul>
                                                    <li><a href="../event-1.html">Event Style 1</a></li>
                                                    <li><a href="../event-2.html">Event Style 2</a></li>
                                                    <li><a href="../event-3.html">Event Style 3</a></li>
                                                    <li><a href="../event-4.html">Event Style 4</a></li>
                                                    <li><a href="../event-page-1.html">Event Details Page</a></li>
                                                    <li><a href="../signin.html">Sign In or Login</a></li>
                                                    <li><a href="../signup.html">Sign Up or Register</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li>
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Portfolio <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-dropdown">
                                        <li>
                                            <a>Portfolio Default</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="../portfolio-1.html">2 Column</a></li>
                                                <li><a href="../portfolio-2.html">3 Column</a></li>
                                                <li><a href="../portfolio-3.html">4 Column</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Portfolio Wide</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="../portfolio-4.html">Wide Portfolio</a></li>
                                                <li><a href="../portfolio-5.html">No Spacing Portfolio</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a>Portfolio Masonary</a>
                                            <ul class="menu-dropdown menu-dropdown-left">
                                                <li><a href="../portfolio-6.html">3 Column Portfolio</a></li>
                                                <li><a href="../portfolio-7.html">4 Column Portfolio</a></li>
                                                <li><a href="../portfolio-8.html">Wide Portfolio</a></li>
                                                <li><a href="../portfolio-9.html">No Spacing Portfolio</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="../portfolio-grid.html">Portfolio Grid</a></li>
                                        <li><a href="../portfolio-list.html">Portfolio List</a></li>
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Blogs <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu menu-megamenu-medium">
                                        <li class="row">
                                            <div class="col-lg-3">
                                                <div class="megamenu-ttl">Blog Grid Sytle</div>
                                                <ul>
                                                    <li><a href="../blogs-1.html">Blog 2 Column</a></li>
                                                    <li><a href="../blogs-2.html">Blog 3 Column</a></li>
                                                    <li><a href="../blogs-3.html">Blog 4 Column</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="megamenu-ttl">Blog List Sytle</div>
                                                <ul>
                                                    <li><a href="../blogs-9.html">Blog List</a></li>
                                                    <li><a href="../blogs-10.html">Blog List Left Sidebar</a></li>
                                                    <li><a href="../blogs-11.html">Blog List Right Sidebar</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Blog with Sidebar Sytle</div>
                                                <ul>
                                                    <li><a href="../blogs-4.html">Blog 1 Column Right Sidebar</a></li>
                                                    <li><a href="../blogs-5.html">Blog 2 Column Right Sidebar</a></li>
                                                    <li><a href="../blogs-6.html">Blog 3 Column Right Sidebar</a></li>
                                                    <li><a href="../blogs-7.html">Blog 2 Column Left Sidebar</a></li>
                                                    <li><a href="../blogs-8.html">Blog 3 Column Left Sidebar</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-2">
                                                <div class="megamenu-ttl">Blog Page</div>
                                                <ul>
                                                    <li><a href="../blog-1.html">Blog Detail 1</a></li>
                                                    <li><a href="../blog-2.html">Blog Detail 2</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li class="menu-megamenu-li">
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Components <i class="fa fa-chevron-down"></i></a>
                                    <ul class="menu-megamenu menu-megamenu-small">
                                        <li class="row">
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Components Link</div>
                                                <ul>
                                                    <li><a href="accordions.html"><i class="icon-plus mr-2"></i> Accordions</a></li>
                                                    <li><a href="alerts.html"><i class="icon-exclamation mr-2"></i> Alerts</a></li>
                                                    <li><a href="badges.html"><i class="icon-badge mr-2"></i> Badge</a></li>
                                                    <li><a href="buttons.html"><i class="icon-star mr-2"></i> Buttons</a></li>
                                                    <li><a href="cards.html"><i class="icon-credit-card mr-2"></i> Cards</a></li>
                                                    <li><a href="dropcap.html"><i class="icon-bulb mr-2"></i> Dropcap</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Components Link</div>
                                                <ul>
                                                    <li><a href="grid.html"><i class="icon-grid mr-2"></i> Grid</a></li>
                                                    <li><a href="lists.html"><i class="icon-list mr-2"></i> Lists</a></li>
                                                    <li><a href="panels.html"><i class="icon-speedometer mr-2"></i> Panels</a></li>
                                                    <li><a href="pricingtable.html"><i class="fa fa-table mr-2"></i> Pricing Table</a></li>
                                                    <li><a href="progressbars.html"><i class="icon-chart mr-2"></i> Progressbars</a></li>
                                                    <li><a href="sliders.html"><i class="icon-compass mr-2"></i> Sliders</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="megamenu-ttl">Components Link</div>
                                                <ul>
                                                    <li><a href="social-list.html"><i class="icon-list mr-2"></i> Social List</a></li>
                                                    <li><a href="tables.html"><i class="fa fa-table mr-2"></i> Tables</a></li>
                                                    <li><a href="tabs.html"><i class="icon-cursor mr-2"></i> Tabs</a></li>
                                                    <li><a href="typography.html"><i class="icon-tag mr-2"></i> Typography</a></li>
                                                </ul>
                                            </div>
                                        </li> 
                                    </ul>
                                </li>
                                <li>
                                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect hdr-search" href="#"><i class="fa fa-search"></i></a>
                                </li>
                                <li class="mobile-menu-close"><i class="fa fa-times"></i></li>
                            </ul><!-- End Menu Section -->
                            <div id="menu-bar"><a><i class="fa fa-bars"></i></a></div>
                        </div>
                    </div>
                </div>
                <div class="search-bar animated zoomIn">
                    <div class="search-content">
                        <div class="search-input">
                            <input type="text" placeholder="Enter your text ....">
                            <button class="search-btn"><i class="icon-magnifier"></i></button>
                        </div>
                    </div>
                    <div class="search-close"><i class="icon-close"></i></div>
                </div>
            </div>
        </header><!-- End Header Section -->
        <!-- Start Page Title Section -->
        <div class="page-ttl">
            <div class="layer-stretch">
                <div class="page-ttl-container">
                    <h1>Buttons</h1>
                    <p><a href="#">Home</a> &#8594; <a href="#">Components</a> &#8594; <span>Buttons</span></p>
                </div>
            </div>
        </div><!-- End Page Title Section -->
        <!-- Start Button Section -->
        <div class="light-background">
            <div class="layer-stretch">
                <div class="layer-wrapper pb-0">
                    <div class="row pt-4">
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Default Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Use a classes <code>btn btn-default</code> to quickly create a General btn.</p>
                                        <button class="btn btn-default m-1">Default</button>
                                        <button class="btn btn-primary m-1">Primary</button>
                                        <button class="btn btn-secondary m-1">Secondary</button>
                                        <button class="btn btn-success m-1">Success</button>
                                        <button class="btn btn-warning m-1">Warning</button>
                                        <button class="btn btn-danger m-1">Danger</button>
                                        <button class="btn btn-info m-1">Info</button>
                                        <button class="btn btn-dark m-1">Dark</button>
                                        <button class="btn btn-light text-dark m-1">Light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">General Rounded Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Use a classes <code>btn btn-default btn-pill</code> to quickly create btn</p>
                                        <button class="btn btn-default btn-pill m-1">Default</button>
                                        <button class="btn btn-primary btn-pill m-1">Primary</button>
                                        <button class="btn btn-secondary btn-pill m-1">Secondary</button>
                                        <button class="btn btn-success btn-pill m-1">Success</button>
                                        <button class="btn btn-warning btn-pill m-1">Warning</button>
                                        <button class="btn btn-danger btn-pill m-1">Danger</button>
                                        <button class="btn btn-info btn-pill m-1">Info</button>
                                        <button class="btn btn-dark btn-pill m-1">Dark</button>
                                        <button class="btn btn-light text-dark btn-pill m-1">Light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Boredered Buttons Outline 1x</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Use a classes <code>btn btn-outline btn-outline-1x</code> to quickly create a Outline btn.</p>
                                        <button class="btn btn-outline btn-default btn-outline-1x m-1">Default</button>
                                        <button class="btn btn-outline btn-primary btn-outline-1x m-1">Primary</button>
                                        <button class="btn btn-outline btn-secondary btn-outline-1x m-1">Secondary</button>
                                        <button class="btn btn-outline btn-success btn-outline-1x m-1">Success</button>
                                        <button class="btn btn-outline btn-warning btn-outline-1x m-1">Warning</button>
                                        <button class="btn btn-outline btn-danger btn-outline-1x m-1">Danger</button>
                                        <button class="btn btn-outline btn-info btn-outline-1x m-1">Info</button>
                                        <button class="btn btn-outline btn-dark btn-outline-1x m-1">Dark</button>
                                        <button class="btn btn-outline btn-light btn-outline-1x text-dark m-1">Light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Boredered Buttons Outline 2x</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Use a classes <code>btn btn-outline btn-outline-2x</code> to quickly create a Outline btn.</p>
                                        <button class="btn btn-outline btn-default btn-outline-2x m-1">Default</button>
                                        <button class="btn btn-outline btn-primary btn-outline-2x m-1">Primary</button>
                                        <button class="btn btn-outline btn-secondary btn-outline-2x m-1">Secondary</button>
                                        <button class="btn btn-outline btn-success btn-outline-2x m-1">Success</button>
                                        <button class="btn btn-outline btn-warning btn-outline-2x m-1">Warning</button>
                                        <button class="btn btn-outline btn-danger btn-outline-2x m-1">Danger</button>
                                        <button class="btn btn-outline btn-info btn-outline-2x m-1">Info</button>
                                        <button class="btn btn-outline btn-dark btn-outline-2x m-1">Dark</button>
                                        <button class="btn btn-outline btn-light btn-outline-2x text-dark m-1">Light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Boredered Buttons Outline 1x</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Use a classes <code>btn btn-outline btn-outline-1x</code> to quickly create a  Rounded Outline btn.</p>
                                        <button class="btn btn-outline btn-default btn-pill btn-outline-1x m-1">Default</button>
                                        <button class="btn btn-outline btn-primary btn-pill btn-outline-1x m-1">Primary</button>
                                        <button class="btn btn-outline btn-secondary btn-pill btn-outline-1x m-1">Secondary</button>
                                        <button class="btn btn-outline btn-success btn-pill btn-outline-1x m-1">Success</button>
                                        <button class="btn btn-outline btn-warning btn-pill btn-outline-1x m-1">Warning</button>
                                        <button class="btn btn-outline btn-danger btn-pill btn-outline-1x m-1">Danger</button>
                                        <button class="btn btn-outline btn-info btn-pill btn-outline-1x m-1">Info</button>
                                        <button class="btn btn-outline btn-dark btn-pill btn-outline-1x m-1">Dark</button>
                                        <button class="btn btn-outline btn-light btn-pill btn-outline-1x text-dark m-1">Light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Buttons with Icons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Just add icon in i tag and text in span thats it.</p>
                                        <button class="btn btn-default btn-pill m-1">
                                            <i class="far fa-envelope mr-2"></i><span>Default</span>
                                        </button>
                                        <button class="btn btn-outline btn-warning btn-pill btn-outline-2x m-1">
                                            <i class="fa fa-cogs mr-2"></i><span>Setting</span>
                                        </button>
                                        <button class="btn btn-outline btn-danger btn-outline-1x m-1">
                                            <i class="fas fa-flag mr-2"></i><span>Report</span>
                                        </button>
                                        <button class="btn btn-success m-1">
                                            <i class="fas fa-battery-half mr-2"></i><span>Bath</span>
                                        </button>
                                        <button class="btn btn-primary btn-pill m-1">
                                            <i class="fas fa-cloud-upload-alt mr-2"></i><span>Upload</span>
                                        </button>
                                        <button class="btn btn-info btn-outline btn-outline-2x btn-pill m-1">
                                            <span>Love</span><i class="fa fa-heart ml-2"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Dropdown Button</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Just add icon in i tag and text in span thats it.</p>
                                        <div class="dropdown d-inline-block mb-2">
                                            <button class="btn btn-default dropdown-toggle" id="dropdown-button-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdown-button-1">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block mb-2">
                                            <button class="btn btn-primary dropdown-toggle" id="dropdown-button-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdown-button-2">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block mb-2">
                                            <button class="btn btn-outline btn-outline-2x btn-pill btn-secondary dropdown-toggle" id="dropdown-button-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdown-button-3">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block mb-2">
                                            <button class="btn btn-outline btn-outline-2x btn-success dropdown-toggle" id="dropdown-button-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdown-button-4">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block mb-2">
                                            <button class="btn btn-danger dropdown-toggle" id="dropdown-button-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdown-button-5">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block mb-2">
                                            <button class="btn btn-warning dropdown-toggle btn-pill" id="dropdown-button-6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdown-button-6">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Icon Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Just add icon in i tag, thats it.</p>
                                        <button class="btn btn-default m-1"><i class="far fa-user"></i></button>
                                        <button class="btn btn-primary m-1"><i class="far fa-envelope"></i></button>
                                        <button class="btn btn-secondary m-1"><i class="far fa-chart-bar"></i></button>
                                        <button class="btn btn-success m-1"><i class="fa fa-folder"></i></button>
                                        <button class="btn btn-warning m-1"><i class="fab fa-html5"></i></button>
                                        <button class="btn btn-danger m-1"><i class="fab fa-css3"></i></button>
                                        <button class="btn btn-info m-1"><i class="fa fa-cogs"></i></button>
                                        <button class="btn btn-dark m-1"><i class="far fa-bookmark"></i></button>
                                        <button class="btn btn-light text-dark m-1"><i class="fa fa-graduation-cap"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Social Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Just add icon in i tag and use class <code>btn-pill</code> thats it.</p>
                                        <button class="btn btn-facebook btn-pill m-1"><i class="fab fa-facebook"></i></button>
                                        <button class="btn btn-twitter btn-pill m-1"><i class="fab fa-twitter"></i></button>
                                        <button class="btn btn-google-plus btn-pill m-1"><i class="fab fa-google-plus"></i></button>
                                        <button class="btn btn-instagram btn-pill m-1"><i class="fab fa-instagram"></i></button>
                                        <button class="btn btn-dribbble btn-pill m-1"><i class="fab fa-dribbble"></i></button>
                                        <button class="btn btn-pinterest btn-pill m-1"><i class="fab fa-pinterest"></i></button>
                                        <button class="btn btn-linkedin btn-pill m-1"><i class="fab fa-linkedin"></i></button>
                                        <button class="btn btn-youttube btn-pill m-1"><i class="fab fa-youtube"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Circle Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Normal Circle Buttons</p>
                                        <button class="btn btn-default btn-circle m-1"><i class="far fa-user"></i></button>
                                        <button class="btn btn-primary btn-circle m-1"><i class="far fa-envelope"></i></button>
                                        <button class="btn btn-secondary btn-circle m-1"><i class="fas fa-chart-bar"></i></button>
                                        <button class="btn btn-success btn-circle m-1"><i class="fa fa-folder"></i></button>
                                        <button class="btn btn-warning btn-circle m-1"><i class="fab fa-html5"></i></button>
                                        <button class="btn btn-danger btn-circle m-1"><i class="fab fa-css3"></i></button>
                                        <button class="btn btn-info btn-circle m-1"><i class="fa fa-cogs"></i></button>
                                        <button class="btn btn-dark btn-circle m-1"><i class="far fa-bookmark"></i></button>
                                        <button class="btn btn-light btn-circle text-dark m-1"><i class="fa fa-graduation-cap"></i></button>
                                        <p class="mt-3">Large Circle Buttons</p>
                                        <button class="btn btn-default btn-circle btn-lg m-1"><i class="far fa-user"></i></button>
                                        <button class="btn btn-primary btn-circle btn-lg m-1"><i class="far fa-envelope"></i></button>
                                        <button class="btn btn-secondary btn-circle btn-lg m-1"><i class="fas fa-chart-bar"></i></button>
                                        <button class="btn btn-success btn-circle btn-lg m-1"><i class="fa fa-folder"></i></button>
                                        <button class="btn btn-warning btn-circle btn-lg m-1"><i class="fab fa-html5"></i></button>
                                        <button class="btn btn-danger btn-circle btn-lg m-1"><i class="fab fa-css3"></i></button>
                                        <button class="btn btn-info btn-circle btn-lg m-1"><i class="fa fa-cogs"></i></button>
                                        <button class="btn btn-dark btn-circle btn-lg m-1"><i class="far fa-bookmark"></i></button>
                                        <button class="btn btn-light btn-circle btn-lg text-dark m-1"><i class="fa fa-graduation-cap"></i></button>
                                        <p class="mt-3">Extra Large Circle Buttons</p>
                                        <button class="btn btn-default btn-circle btn-xl m-1"><i class="far fa-user"></i></button>
                                        <button class="btn btn-primary btn-circle btn-xl m-1"><i class="far fa-envelope"></i></button>
                                        <button class="btn btn-secondary btn-circle btn-xl m-1"><i class="fas fa-chart-bar"></i></button>
                                        <button class="btn btn-success btn-circle btn-xl m-1"><i class="fa fa-folder"></i></button>
                                        <button class="btn btn-warning btn-circle btn-xl m-1"><i class="fab fa-html5"></i></button>
                                        <button class="btn btn-danger btn-circle btn-xl m-1"><i class="fab fa-css3"></i></button>
                                        <button class="btn btn-info btn-circle btn-xl m-1"><i class="fa fa-cogs"></i></button>
                                        <button class="btn btn-dark btn-circle btn-xl m-1"><i class="far fa-bookmark"></i></button>
                                        <button class="btn btn-light btn-circle btn-xl text-dark m-1"><i class="fa fa-graduation-cap"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Animated Button</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-default dropdown-toggle" id="anmiation-button-1" data-toggle="dropdown">flipInX</button>
                                            <ul class="dropdown-menu animated flipInX" aria-labelledby="anmiation-button-1">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-primary dropdown-toggle" id="dropdown-button-21" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">slideInUp</button>
                                            <ul class="dropdown-menu animated slideInUp" aria-labelledby="dropdown-button-21">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-outline btn-outline-2x btn-pill btn-secondary dropdown-toggle" id="dropdown-button-311" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">pulse</button>
                                            <ul class="dropdown-menu animated pulse" aria-labelledby="dropdown-button-311">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-outline btn-outline-2x btn-success dropdown-toggle" id="dropdown-button-141" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">swing</button>
                                            <ul class="dropdown-menu animated swing" aria-labelledby="dropdown-button-141">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-danger dropdown-toggle" id="dropdown-button-151" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">rotateIn</button>
                                            <ul class="dropdown-menu animated rotateIn" aria-labelledby="dropdown-button-151">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-warning dropdown-toggle btn-pill" id="dropdown-button-611" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">flip</button>
                                            <ul class="dropdown-menu animated flip" aria-labelledby="dropdown-button-611">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-secondary dropdown-toggle" id="dropdown-button-612" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">tada</button>
                                            <ul class="dropdown-menu animated tada" aria-labelledby="dropdown-button-612">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-primary dropdown-toggle" id="dropdown-button-613" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">wobble</button>
                                            <ul class="dropdown-menu animated wobble" aria-labelledby="dropdown-button-613">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-danger dropdown-toggle" id="dropdown-button-614" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">jello</button>
                                            <ul class="dropdown-menu animated jello" aria-labelledby="dropdown-button-614">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-success btn-pill dropdown-toggle" id="dropdown-button-615" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">rubberBand</button>
                                            <ul class="dropdown-menu animated rubberBand" aria-labelledby="dropdown-button-615">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                        <div class="dropdown d-inline-block m-2">
                                            <button class="btn btn-warning btn-pill dropdown-toggle" id="dropdown-button-616" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">rollIn</button>
                                            <ul class="dropdown-menu animated rollIn" aria-labelledby="dropdown-button-616">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="dropdown-divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Material Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <p>Use a classes <code>mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-default</code> to quickly create a material button.</p>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-default m-1">Default</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-primary m-1">Primary</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-secondary m-1">Secondary</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-success m-1">Success</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-danger m-1">Danger</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-warning m-1">Warning</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-info m-1">Info</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-dark m-1">Dark</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-light m-1">light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Material Raised Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-default m-1">Default</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised mdl-button--raised button button-primary m-1">Primary</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-secondary m-1">Secondary</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-success m-1">Success</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-danger m-1">Danger</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-warning m-1">Warning</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-info m-1">Info</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-dark m-1">Dark</button>
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised button button-light m-1">light</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Raised &#38; Rounded material Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-default m-1"><i class="far fa-user"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-primary m-1"><i class="far fa-envelope"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-secondary m-1"><i class="fa fa-chart-bar"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-success m-1"><i class="fa fa-folder"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-danger m-1"><i class="fab fa-html5"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-warning m-1"><i class="fab fa-css3"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-info m-1"><i class="fa fa-cogs"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-dark m-1"><i class="fa fa-bookmark"></i></button>
                                        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored button-light m-1"><i class="fa fa-graduation-cap"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="panel panel-default">
                                <div class="panel-head">
                                    <div class="panel-title">Matrial Dropdown Buttons</div>
                                </div>
                                <div class="panel-wrapper">
                                    <div class="panel-body">
                                        <div class="m-3 d-inline-block">
                                            <button id="demo-menu-lower-1" class="mdl-button mdl-js-button mdl-button--icon"><i class="fa fa-share-alt"></i></button>
                                            <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-lower-1">
                                                <li class="mdl-menu__item">Some Action</li>
                                                <li class="mdl-menu__item">Another Action</li>
                                                <li class="mdl-menu__item">Disabled Action</li>
                                                <li class="mdl-menu__item">Yet Another Action</li>
                                            </ul>
                                        </div>
                                        <div class="m-3 d-inline-block">
                                            <button id="demo-menu-lower-2" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"><i class="fa fa-user"></i></button>
                                            <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-lower-2">
                                                <li class="mdl-menu__item">Some Action</li>
                                                <li class="mdl-menu__item">Another Action</li>
                                                <li class="mdl-menu__item">Disabled Action</li>
                                                <li class="mdl-menu__item">Yet Another Action</li>
                                            </ul>
                                        </div>
                                        <div class="m-3 d-inline-block">
                                            <button id="demo-menu-lower-3" class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-primary">DropDown</button>
                                            <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-lower-3">
                                                <li class="mdl-menu__item">Some Action</li>
                                                <li class="mdl-menu__item">Another Action</li>
                                                <li class="mdl-menu__item">Disabled Action</li>
                                                <li class="mdl-menu__item">Yet Another Action</li>
                                            </ul>
                                        </div>
                                        <div class="m-3 d-inline-block" style="position: relative;">
                                            <button id="demo-menu-lower-4" class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect button button-danger">DropDown</button>
                                            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="demo-menu-lower-4">
                                                <li class="mdl-menu__item">Some Action</li>
                                                <li class="mdl-menu__item">Another Action</li>
                                                <li class="mdl-menu__item">Disabled Action</li>
                                                <li class="mdl-menu__item">Yet Another Action</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End Button Section -->
        <div class="action">
            <div class="layer-stretch">
                <div class="layer-wrapper text-center">
                    <div class="layer-ttl"><h4>We design <span class="text-primary">delightful</span> digital experiences</h4></div>
                    <div class="p-5 color-light">Read more about what we do and our philosophy of design. Judge for yourself The work and results we’ve achieved for other clients, and meet our highly experienced Team who just love to design, develop and deploy. Tell Us Your Story</div>
                    <a href="#" class="btn btn-outline btn-primary btn-pill btn-outline-2x btn-lg mt-3">Tell Us Your Story</a>
                </div>
            </div>
        </div><!-- End Action Section -->
        <!-- Start Footer Section -->
        <footer id="footer">
            <div class="layer-stretch">
                <!-- Start main Footer Section -->
                <div class="row layer-wrapper">
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Basic Info</p></div>
                        <div class="footer-container footer-a">
                            <div class="tbl">
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-map-marker"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">
                                            Your office, Building Name<br />
                                            Street name, Area<br />
                                            City, Country Pin Code
                                        </p>
                                    </div>
                                </div>
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-phone"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">11122333333</p>
                                    </div>
                                </div>
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-envelope"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">hello@yourdomain.com</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Quick Links</p></div>
                        <div class="footer-container footer-b">
                            <div class="tbl">
                                <div class="tbl-row">
                                    <ul class="tbl-cell">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about-1.html">About</a></li>
                                        <li><a href="event-1.html">Event</a></li>
                                        <li><a href="contact-1.html">Contact</a></li>
                                        <li><a href="portfolio-1.html">Portfolio</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                    <ul class="tbl-cell">
                                        <li><a href="signin.html">Sign In</a></li>
                                        <li><a href="signup.html">Sign Up</a></li>
                                        <li><a href="services-1.html">Services</a></li>
                                        <li><a href="Blogs-1.html">Blogs</a></li>
                                        <li><a href="Blog-1.html">Blog</a></li>
                                        <li><a href="team-1.html">Team</a></li>
                                        <li><a href="faq.html">Faq</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Newsletter</p></div>
                        <div class="footer-container footer-c">
                            <div class="footer-subscribe">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                    <input class="mdl-textfield__input" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="subscribe-email">
                                    <label class="mdl-textfield__label" for="subscribe-email">Your Email</label>
                                    <span class="mdl-textfield__error">Please Enter Valid Email!</span>
                                </div>
                                <div class="footer-subscribe-button">
                                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect button button-primary">Submit</button>
                                </div>
                            </div>
                            <ul class="social-list social-list-colored footer-social">
                                <li>
                                    <a href="#" target="_blank" id="footer-facebook" class="fa fa-facebook"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-facebook">Facebook</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-twitter" class="fa fa-twitter"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-twitter">Twitter</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-google" class="fa fa-google"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-google">Google</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-instagram" class="fa fa-instagram"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-instagram">Instagram</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-youtube" class="fa fa-youtube"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-youtube">Youtube</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-linkedin" class="fa fa-linkedin"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-linkedin">Linkedin</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-flickr" class="fa fa-flickr"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-flickr">Flickr</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-rss" class="fa fa-rss"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-rss">Rss</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- End main Footer Section -->
            <!-- Start Copyright Section -->
            <div id="copyright">
                <div class="layer-stretch">
                    <div class="paragraph-medium paragraph-white">2017 © Pepdev ALL RIGHTS RESERVED.</div>
                </div>
            </div><!-- End of Copyright Section -->
        </footer><!-- End of Footer Section -->
    </div>

    <!-- **********Included Scripts*********** -->

    <!-- Jquery Library 2.1 JavaScript-->
    <script src="../assets/plugin/jquery/jquery-2.1.4.min.js"></script>
    <!-- Popper JavaScript-->
    <script src="../assets/plugin/popper/popper.min.js"></script>
    <!-- Bootstrap Core JavaScript-->
    <script src="../assets/plugin/bootstrap/bootstrap.min.js"></script>
    <!-- Modernizr Core JavaScript-->
    <script src="../assets/plugin/modernizr/modernizr.js"></script>
    <!-- Animaateheading JavaScript-->
    <script src="../assets/plugin/animateheading/animateheading.js"></script>
    <!-- Material Design Lite JavaScript-->
    <script src="../assets/plugin/material/material.min.js"></script>
    <!-- Material Select Field Script -->
    <script src="../assets/plugin/material/mdl-selectfield.min.js"></script>
    <!-- Flexslider Plugin JavaScript-->
    <script src="../assets/plugin/flexslider/jquery.flexslider.min.js"></script>
    <!-- Owl Carousel Plugin JavaScript-->
    <script src="../assets/plugin/owl_carousel/owl.carousel.min.js"></script>
    <!-- Scrolltofixed Plugin JavaScript-->
    <script src="../assets/plugin/scrolltofixed/jquery-scrolltofixed.min.js"></script>
    <!-- Magnific Popup Plugin JavaScript-->
    <script src="../assets/plugin/magnific_popup/jquery.magnific-popup.min.js"></script>
    <!-- WayPoint Plugin JavaScript-->
    <script src="../assets/plugin/waypoints/jquery.waypoints.min.js"></script>
    <!-- CounterUp Plugin JavaScript-->
    <script src="../assets/plugin/counterup/jquery.counterup.js"></script>
    <!-- masonry Plugin JavaScript-->
    <script src="../assets/plugin/masonry_pkgd/masonry.pkgd.min.js"></script>
    <!-- SmoothScroll Plugin JavaScript-->
    <script src="../assets/plugin/smoothscroll/smoothscroll.min.js"></script>
    <!--Custom JavaScript-->
    <script src="../dist/js/custom.js"></script>
    
</body>
</html>